<template>
	<div class="view">
		<div class="foot">
			<div>影院名称：时代今典</div>
			<div>用户名：{{mapUserInfo.name}}</div>
			<div @click="clickLoginOut"><img :src="loginBack" alt=""></div>
			<div class="doubleView"><a href="#/doubleView" target="_block">双屏展示</a></div>
			<div><full-screen v-model="isFullScreen" @on-change="fullscreenChange"></full-screen></div>
		</div>
	</div>
</template>

<script>
import fullScreen from '@/components/fullscreen.vue';

export default {
	components: {
		fullScreen
	},
	data() {
		return {
			isFullScreen: false,
			loginBack: require('@/assets/loginBack.png'),
		}
	},
	computed: {
		mapUserInfo() {
			var account = this.$store.getters.account;
			if (account != null) {
				return {
					name: account.name,
				};
			} else {
				this.$router.replace({
					name: 'login'
				})
			}
		}
	},
	mounted() {
		
	},
	methods: {
		clickLoginOut() {
			this.$Message.success('退出成功');
			localStorage.removeItem('account');
			localStorage.removeItem('account-token');
			setTimeout(() => {
				this.$router.replace({
					name: 'login'
				})
			}, 100)
		},
		fullscreenChange (isFullScreen) {
                // console.log(isFullScreen);
        }
	}
}
</script>

<style lang="less" scoped>
.view {
	width: 14.4rem;
	height: .6rem;
	margin: 0 auto;
	line-height: .6rem;
	font-size: .14rem;
	.foot {
		display: flex;
		margin-left: .3rem;
		color: #fff;
		div {
			margin-right: .3rem;
			img {
				vertical-align: middle;
				cursor: pointer;
			}
		}
		.doubleView {
			cursor: pointer;
			&:hover {
				color: #5cadff;
			}
		}
	}
}
</style>